import React from "react";
import "antd/dist/antd.css";
import { Form, Input, Button, Space, Select, DatePicker } from "antd";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";

// ! prefect form 内层增减表单项


const { Option } = Select;

const areas = [
  { label: "Beijing", value: "Beijing" },
  { label: "Shanghai", value: "Shanghai" }
];

const type = [
  { text: "免费", value: "free" },
  { text: "付费", value: "unfree" }
];

const sights = {
  Beijing: ["Tiananmen", "Great Wall"],
  Shanghai: ["Oriental Pearl", "The Bund"]
};

const Demo = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log("Received values of form:", values);
  };

  const handleChange = () => {
    form.setFieldsValue({ sights: [] });
  };

  const handleFieldChange = (field, allField) => {

    const area = form.getFieldValue('area')
    form.setFieldsValue({ 'area': area});
    const allFormData = form.getFieldsValue()

    if (field[0]?.name.length === 3 && field[0]?.name[2] === 'price') {
      const index = field[0].name[1]
      if (allFormData.sights[index].value) {
        allFormData.sights[index].value = undefined
        form.setFieldsValue(allFormData)
      }
      console.log("field, allField", field, allField, form, allFormData);
    }
  };

  return (
    <Form
      form={form}
      name="dynamic_form_nest_item"
      onFinish={onFinish}
      autoComplete="off"
      onFieldsChange={handleFieldChange}
    >
      <Form.Item
        name="area"
        label="Area"
        rules={[{ required: true, message: "Missing area" }]}
      >
        <Select options={areas} onChange={handleChange} />
      </Form.Item>
      <Form.List name="sights">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field) => (
              <Space key={field.key} align="baseline">
                <Form.Item
                  noStyle
                  shouldUpdate={(prevValues, curValues) => {
                    // console.log('prevValues, curValues', prevValues, curValues, prevValues.sights !== curValues.sights);
                    
                    return prevValues.area !== curValues.area ||
                    prevValues.sights !== curValues.sights
                  }
                  }
                >
                  {() => (
                    <Form.Item
                      {...field}
                      label="Sight"
                      name={[field.name, "sight"]}
                      fieldKey={[field.fieldKey, "sight"]}
                      rules={[{ required: true, message: "Missing sight" }]}
                    >
                      <Select
                        disabled={!form.getFieldValue("area")}
                        style={{ width: 130 }}
                      >
                        {(sights[form.getFieldValue("area")] || []).map(
                          (item) => (
                            <Option key={item} value={item}>
                              {item}
                            </Option>
                          )
                        )}
                      </Select>
                    </Form.Item>
                  )}
                </Form.Item>
                <Form.Item
                  {...field}
                  label="Price"
                  name={[field.name, "price"]}
                  fieldKey={[field.fieldKey, "price"]}
                  rules={[{ required: true, message: "Missing price" }]}
                >
                  <Select style={{ width: 130 }}>
                    {type.map((item) => (
                      <Option key={item.value} value={item.value}>
                        {item.text}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
                <Form.Item
                    {...field}
                    label="value"
                    name={[field.name, "value"]}
                    fieldKey={[field.fieldKey, "value"]}
                    // rules={[{ required: true, message: 'Missing price' }]}
                  >
                    {form.getFieldValue(["sights", field.name, "price"]) ===
                    "free" ? (
                      <DatePicker />
                    ) : (
                      <Input />
                    )}
                  </Form.Item>

                <MinusCircleOutlined onClick={() => remove(field.name)} />
              </Space>
            ))}

            <Form.Item>
              <Button
                type="dashed"
                onClick={() => add()}
                block
                icon={<PlusOutlined />}
              >
                Add sights
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};


export default Demo